<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相册浏览</title>
  <!-- 引入配置文件 -->
  <script src="config.js"></script>
  <!-- 本地Bootstrap 5 CSS和JS -->
  <link rel="stylesheet" href="lib/bootstrap-5.3.3/bootstrap.min.css">
  <script type="text/javascript" src="lib/bootstrap-5.3.3/bootstrap.bundle.min.js"></script>
  <script src="lib/jquery/jquery-3.4.1.min.js"></script>
  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">

  <!-- video-js -->
  <link href="lib/video-js/video-js.min.css" rel="stylesheet">
  <script src="lib/video-js/video.min.js"></script>
  <script src="lib/video-js/lang/zh-CN.js"></script>

  <!-- openseadragon -->
  <script type="text/javascript" src="lib/openseadragon-3.1.0/openseadragon.js"></script>

  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <script src="js/script-image.js"></script>
  <script src="js/script-video.js"></script>
  <script src="js/script-file.js"></script>
  <script src="js/photo.js"></script>

  <style>
    /* 自定义样式 */
    body {
      background-color: #333;
    }

  /* 右键菜单样式 */
  #contextMenu {
    position: absolute;
    z-index: 99999;
    display: none;
  }

  /* 防止父元素裁剪 */
  #fileList {
    position: static !important;
    overflow: visible !important;
  }
  </style>
</head>
<body>

    <div class="container mt-5">
        <!-- <h3>File List</h3> -->
        <div class="input-group mb-3">
            <button class="btn btn-outline-secondary" type="button" onclick="goUpDirectory()">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
                    <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
                </svg>
            </button>  <!-- 返回上一级按钮 -->
            <button class="btn btn-outline-secondary" type="button" onclick="displayPhotoAlbumList(pageNumber, pageSize)">刷新</button>
            <input type="text" id="filePath" class="form-control" spellcheck="false" autocomplete="off" placeholder="请输入文件路径" aria-label="文件路径">
        </div>

        <div id="fileList">
            <ul class="ulfile"></ul>
        </div>
    </div>


<!--modal-xl modal-fullscreen-->
<!-- 文件 模态框 -->
<div class="modal" id="fileModal" tabindex="-1" aria-labelledby="fileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" style="margin-top:0px;margin-bottom:0px;height:100%;">
        <div class="modal-content" style="border-radius:0px; margin:auto">
            <div class="modal-header">
                <!-- <h5 class="modal-title" id="fileModalLabel">File Viewer</h5> -->
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="fileContent" class="text-center">
                    <!-- 文件名、路径和按钮将在这里动态填充 -->
                    <!-- <h5 id="fileName"></h5>
                    <p id="filePath"></p>
                    <button class="btn btn-primary" id="openFileBtn">打开</button>
                    <button class="btn btn-success" id="downloadFileBtn">下载</button> -->
                </div>
            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div> -->
        </div>
    </div>
</div>


<!-- 图片 模态框 -->
<div class="modal" id="imgModal" tabindex="-1" aria-labelledby="fileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen" style="margin-top:0px;margin-bottom:0px;height:100%;">
        <div class="modal-content" style="border-radius:0px; margin:auto">
            <button type="button" class="btn-close fullscreen-btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            <div id="imgContent" class="img-content">
                <div id="openseadragon1"></div>
            </div>
        </div>
    </div>
</div>


<!-- 视频 模态框 -->
<div class="modal" id="videoModal" tabindex="-1" aria-labelledby="fileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen" style="margin-top:0px;margin-bottom:0px;height:100%;">
        <div class="modal-content" style="border-radius:0px; margin:auto">
            <button type="button" class="btn-close fullscreen-btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            <div id="videoContent" class="video-content">
                <video id="vid" class="video-js" controls preload="none" data-setup="{}" ></video>
            </div>
        </div>
    </div>
</div>



    <br>
    <ul class="pagination pagination-sm pagination-bar" id="pageBar">
        <!-- <li class="page-item"><a class="page-link" onclick="openPage('Previous')">Previous</a></li>
        <li class="page-item"><a class="page-link" onclick="openPage('1')">1</a></li>
        <li class="page-item active"><a class="page-link" onclick="openPage('2')">2</a></li>
        <li class="page-item"><a class="page-link" onclick="openPage('3')">3</a></li>
        <li class="page-item"><a class="page-link" onclick="openPage('Next')">Next</a></li> -->
    </ul>

    <!-- 右键菜单 -->
    <div id="contextMenu" class="dropdown-menu">
        <a class="dropdown-item" href="#" onclick="handleDownload()">下载</a>
        <a class="dropdown-item" href="#" onclick="handleViewOriginal()">查看原图</a>
        <a class="dropdown-item" href="#" onclick="handleOpenLink()">打开链接</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item text-danger" href="#" onclick="handleDelete()">删除</a>
    </div>

</body>
</html>
